﻿@inherits RazorFunction
@using Composite.Media.YouTubeChannel

@functions {
    public override string FunctionDescription
    {
        get { return "A Youtube Channel Viewer"; }
    }

    [FunctionParameter(Label = "YouTube Channel", Help = "The user name or URL of the YouTube channel")]
    public string YouTubeChannel { get; set; }

    [FunctionParameter(Label = "API Key", Help = "API Key")]
    public string APIKey { get; set; }

    [FunctionParameter(Label = "Page Size", Help = "The count of videos per page.", DefaultValue = 10)]
    public int PageSize { get; set; }
}
@{

    YouTubeChannel = YoutubeChannelFacade.ParseYouTubeChannelReference(YouTubeChannel);

    var pageToken = Request["pagetoken"] ?? string.Empty;

    var playlist = YoutubeChannelFacade.GetYouTubeChannel(YouTubeChannel, PageSize, pageToken, APIKey);

    if (playlist == null)
    {
        <div class="alert alert-warning">@Resources.YouTubeChannel.NoItemsMessage</div>
        return;
    }

}

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0">
<head>
</head>
<body>

    <div class="youtube-channel row">
        <div class="col-xs-12 col-sm-12 col-md-7">
            <div id="ytplayer"></div>
            <h3 id="js-player-title">
                @playlist.items[0].snippet.title
            </h3>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-5">
            <div class="list-group">
                @foreach (var video in playlist.items)
                {
                    <a href="#@video.snippet.resourceId.videoId" title="" class="list-group-item clearfix" data-title="@video.snippet.title" data-id="@video.snippet.resourceId.videoId">
                        <img class="img-responsive pull-left" src="@video.snippet.thumbnails["default"].url" alt="img" />
                        <h5 class="list-group-item-heading">@video.snippet.title</h5>
                    </a>
                }
            </div>

            @if (playlist.pageinfo.totalResults > PageSize)
            {
                <ul class="pagination">
                    @if (!string.IsNullOrEmpty(playlist.prevPageToken))
                    {
                        <li><a href="?pagetoken=@playlist.prevPageToken" title="Previous">«</a></li>
                    }
                    else
                    {
                        <li class="disabled"><a>«</a></li>
                    }
                    <li>
                        <a>
                            about <strong>@playlist.pageinfo.totalResults</strong>
                        </a>
                    </li>
                    @if (!string.IsNullOrEmpty(playlist.nextPageToken))
                    {
                        <li><a href="?pagetoken=@playlist.nextPageToken" title="Next">»</a></li>
                    }
                    else
                    {
                        <li class="disabled"><a>»</a></li>
                    }
                </ul>
            }
        </div>
    </div>
    <script id="youtube-player-id" type="text/javascript">

        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


        var YouTubeChannelPlayer;
        function onYouTubePlayerAPIReady() {
            var id = window.location.hash.substr(1);
            YouTubeChannelPlayer = new YT.Player('ytplayer', {
                height: '390',
                width: '100%',
                videoId: id || '@playlist.items[0].snippet.resourceId.videoId'
            });

            if (id) {
                var $item = $('[data-id=' + id + ']');
                $('#js-player-title').text($item.data("title"));
            }
        }

        $(window).on('hashchange', function () {
            var id = window.location.hash.substr(1);
            YouTubeChannelPlayer.loadVideoById({ 'videoId': id, 'suggestedQuality': 'large' });
            var $item = $('[data-id=' + id + ']');
            $('#js-player-title').text($item.data("title"));
            $('html, body').animate({ scrollTop: "0" });
        });
    </script>

</body>

</html>